<template>
<div style="height: 100%;">
    <el-container style="height: 100%;">
      <!-- 左侧菜单栏-->
      <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#1890FF"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="true"
        >
          <div class="sidebar-logo-container" @click="goHome">
              <!-- <img class="sidebar-logo" src="@/assets/logo/logo.png"> -->
              <img class="sidebar-logo" src="../assets/logo/nav_logo.png">
              <h1 class="sidebar-title" v-show="!isCollapse">小关信息管理系统</h1>
          </div>
          <el-menu-item
            :index="item.path"
            v-for="item in noChildren"
            :key="item.path"
            @click="chlickMeun(item)"
          >
            <i :class="'el-icon-' + item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
          <el-submenu
            :index="item.title"
            v-for="(item, idx) in hasChildren"
            :key="idx"
          >
            <template slot="title">
              <i :class="'el-icon-' + item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                :index="subitem.path"
                v-for="(subitem, subindex) in item.children"
                :key="subitem.path"
                @click="chlickMeun(subitem)"
                >
                <i :class="'el-icon-' + subitem.icon"></i>
                <span slot="title">{{ subitem.title }}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
      </el-menu>
      <!-- 内容区域 -->
      <el-container>
        <!-- 头部 -->
        <el-header style="height: 60px;box-shadow: 0.8px 0.8px 0.8px 0.8px #f1f0f0;" class="header_wrap">
          <header>
            <div class="l-content">
              <div @click="collapseMeun" style="margin-right:10px;">
                <i v-if="!isCollapse" class="el-icon-s-fold" style="color:#000;font-size:30px;"></i>
                <i v-else class="el-icon-s-unfold"  style="color:#000;font-size:30px;"></i>
              </div>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
                <!-- :to="current.path" -->
                <el-breadcrumb-item  v-if="current">  
                    {{current.title}}
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="r-content">
              <div class="screenfull">
                   <screefull />
              </div>
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <el-avatar :size="45" :src="userImg" shape="square"></el-avatar><i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-user-solid">个人中心</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-setting">修改密码</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-switch-button" @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </header>
        </el-header>
        <!-- 菜单导航栏 -->
        <commonTab></commonTab>
        <!-- 主内容 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
</div>
</template>

<script>
import screefull from "../views/components/Screenfull.vue"
import { mapState } from "vuex";
import commonTab from "./components/commonTab.vue";
export default {
  components:{
     commonTab,
     screefull
  },
  created(){
    // this.ClearJson();
  },
  computed: {
    noChildren() {      //数据当成data使用
      return this.menu.filter((item) => !item.children);
    },
    hasChildren() {
      return this.menu.filter((item) => item.children);
    },
    ...mapState({
        current: state => state.tab.currentMenu
    }),
    isCollapse() {    //拿取vuex里面的是否展开的值
      return this.$store.state.tab.isCollapse
    }, 
    menu(){
      return this.$store.state.tab.menu
    }
  },
  data() {
    return {
      asideMenu: [
        {
          path: "/",
          name: "home",
          title: "首页",
          icon: "s-home",
        },
        {
          title: "视频管理",
          icon: "video-play",
          children: [
            {
              path: "/addVideo",
              name: "addVideo",
              title: "创作视频",
              icon: "video-camera",
            },
            {
              path: "/editVideo",
              name: "editVideo",
              title: "剪辑视频",
              icon: "s-platform",
            },
          ],
        },
        {
          title: "用户管理",
          icon: "user",
          children: [
            {
              path: "/accountEdit",
              name: "accountEdit",
              title: "账号设置",
              icon: "collection",
            },
            {
              path: "/informationEdit",
              name: "informationEdit",
              title: "信息设置",
              icon: "chat-dot-square",
            },
          ],
        },
        {
          title: "其他设置",
          icon: "s-tools",
          children: [
            {
              path: "/page1",
              name: "page1",
              title: "恢复设置",
              icon: "setting",
            },
            {
              path: "/page2",
              name: "page2",
              title: "客户设置",
              icon: "eleme",
            },
          ],
        },
      ],
      userImg: require("@/assets/img/userImg.jpg")
    };
  },
  methods: {
    chlickMeun(item){   //点击左侧菜单栏
       this.$router.push({name: item.name});   //点击左侧菜单跳转相应的页面组件
       this.$store.commit('selectMenu',item)   //vuex 存储左侧菜单信息
    },
    collapseMeun(){   //点击调用vuex里面是否展开左侧菜单的方法
      this.$store.commit('collapseMenu')
    },
    // 点击左上角logo区域跳转home页
    goHome(){ 
      this.$router.push({name: 'home'})
    },
    // 退出
    logout(){
        this.$confirm('确定要退出系统, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({ type: 'success', message: '退出成功' });
          this.$notify({ title: '退出成功',type: 'success'});
          setTimeout(() => {
            this.$store.commit('clearToken');
            this.$store.commit('clearMenu');
            location.reload();   //刷新浏览器
          },100)

        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消'
          // });          
        });
    }
  }
};
</script>

<style scoped>
.screenfull {
  display: inline-block;
}
.el-menu {
  height: 100%;
  border: none;
}
.el-container .el-header {
  background-color: #fff;
  color: #fff;  
}
.el-container .el-header header {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_wrap{
  padding-right: 25px;
}
.l-content{
  display: flex;
  align-items: center;
}
.r-content{
  margin-right: 0px;
  display: flex;
  align-items: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
.sidebar-logo-link {
  height: 100%;
  width: 100%;
}
/* 左上角logo */
.sidebar-logo-container {
    position: relative;
    width: 100%;
    height: 56px;
    line-height: 56px;
    background: #2b2f3a;
    text-align: center;
    overflow: hidden;
}
.sidebar-logo-container .sidebar-logo {
    /* width: 32px;
    height: 10px;
    line-height:10px;
    vertical-align: middle;
    padding-right: 10px;
    padding-left: 12px; */
    width: 30px;
    height: 30px;
    vertical-align: middle;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    margin-right: 10px;
    margin-left: 10px;
}
.sidebar-logo-container .sidebar-title {
    display: inline-block;
    margin: 0;
    color: #fff;
    font-weight: 800;
    line-height: 50px;
    font-size: 18px;
    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
    vertical-align: middle;
}
</style>
<style>
.el-breadcrumb__item  .el-breadcrumb__inner{
  color:#fff;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, 
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  color:#fff;
}
.el-menu-item-group__title{
  padding:0;
}
.el-submenu__title{
  font-size: 16px;
}
.el-menu-item{
  font-size:  16px;
}
.el-breadcrumb__item .el-breadcrumb__inner{
  color:#303133;
  font-weight: normal;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  color: #97A8BE;
}
.el-breadcrumb{
  font-size: 17px;
}
.el-dropdown-link[data-v-a83bd3b0]{
  color: #001528;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 225px;
  min-height: 400px;
}
.el-main {
   padding: 10px;
   margin-bottom: 10px;
}
</style>